<template>
  <div>
    <div class="main">
      <van-nav-bar title="注册" left-text="登录" left-arrow @click-left="$router.push('/user/login')" fixed />
      <div class="bg">
      </div>
      <div class="form">
        <van-form @submit="onSubmit">
          <van-cell-group inset>
            <van-field v-model="enterData.mobile" name="phone_number" label="手机号" placeholder="手机号"
              :rules="enterData.mobileRules" />
            <van-field v-model="enterData.name" name="username" label="名字" placeholder="用户名" />
            <van-field v-model="enterData.password" type="password" name="password" label="密码"
              placeholder="英文开头6-8位英文+数宇" :rules="enterData.passwordRules" />
            <van-field v-model="enterData.age" name="age" label="年龄" placeholder="年龄18-90" />
            <div style="margin: 16px;">
              <van-button round block type="default" native-type="submit">
                创建账户
              </van-button>
            </div>
          </van-cell-group>
        </van-form>
      </div>
      <p>@bochexianjian.com<</p>
    </div>
  </div>
</template>

<script setup>
import { POST } from '../../tools/fetch.js';
import { userApi } from '../../tools/api.js';
import { showToast } from 'vant';
import { useRouter } from 'vue-router';
const router = useRouter();
import { useUserStore } from '../../tools/storage.js'
import Home from '../home/home.vue';
const userStore = useUserStore();

// 接收用户输入的内容
const enterData = ref({
  mobile: '',
  name: '',
  password: '',
  age: '',
  // 手机号正则
  mobileRules: [
    { required: true, message: '手机号不能为空', trigger: 'onSubmit' },
    { pattern: /^1[3456789]\d{9}$/, message: '手机号格式错误', trigger: 'onSubmit' }
  ],
  // 用户名正则 
  nameRules: [
    { required: true, message: '用户名不能为空', trigger: 'onSubmit' },
    { pattern: /^[a-zA-Z\u4e00-\u9fa5][a-zA-Z0-9\u4e00-\u9fa5]{1,9}$/, message: '用户名格式错误', trigger: 'onSubmit' }
  ],
  // 密码正则
  passwordRules: [
    { required: true, message: '密码不能为空', trigger: 'onSubmit' },
    { pattern: /^[a-zA-Z][a-zA-Z0-9]{5,7}$/, message: '密码格式错误', trigger: 'onSubmit' }
  ],
  // 年龄正则
  ageRules: [
    { required: true, message: '年龄不能为空', trigger: 'onSubmit' },
    { pattern: /^(1[8-9]|[2-8]\d|90)$/, message: '年龄格式错误', trigger: 'onSubmit' }
  ],
});
const onSubmit = async (value) => {
  console.log(value)
  const resResult = await POST({
    api: userApi.register,
    data: {
      phone_number: value.phone_number,
      name: value.username,
      password: value.password,
      age: value.age
    }
  })
   console.log(resResult);
  showToast(resResult.state);
  setTimeout(() => {
    router.replace('/user/login')
  }, 2500)

}

</script>

<style lang="less" scoped>
.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  .bg {
    width: 100vw;
    height:50vh;
    background-image: url(../../assets/images/login/bg.jpg);
    background-size: cover; ;
  }
  .form {
    width: 100%;
  }
  p {
    font-size: 10px;
    margin-top: 1.5vh;
  }
}
</style>